import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:sidebarx/sidebarx.dart';
import '../../constants.dart';
import '../../routes/routePages.dart';
import '../../themes/pageStyles.dart';
import '../../widgets/addons/levelListItem.dart';
import '../../widgets/addons/navListItems.dart';
import '../../widgets/addons/topicListItem.dart';
import '../../widgets/charts/levelPointsBarDesktop.dart';
import '../../widgets/sidebars/settingsBarHorizontal.dart';
import '../../widgets/sidebars/studentSidebar.dart';

class StudentHomeHiLevel extends StatefulWidget {
  const StudentHomeHiLevel({Key? key}) : super(key: key);

  @override
  State<StudentHomeHiLevel> createState() => _StudentHomeHiLevelState();
}

class _StudentHomeHiLevelState extends State<StudentHomeHiLevel> {
  final SidebarXController _xController =
      SidebarXController(selectedIndex: 0, extended: false);
  final PageStyles _pageStyles = PageStyles();

  @override
  Widget build(BuildContext context) {
    final isSmallScreen =
        MediaQuery.of(context).size.width < Constants.DefinedScreenSmallSize;
    final isBigScreen =
        MediaQuery.of(context).size.width > Constants.DefinedScreenBigSize;
    int _selectedSidebarItem = RoutePages.studentPageItems
        .indexWhere((page) => page.route == Get.currentRoute);
    if (isBigScreen) {
      _xController.setExtended(true);
    }
    _xController.selectIndex(_selectedSidebarItem);

    return Container(
      decoration: _pageStyles.pageBoxDecoration(),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Visibility(
              visible: !isSmallScreen,
              child: StudentSidebarX(
                  selectedIndex: _selectedSidebarItem,
                  isBigScreen: isBigScreen)),
          Expanded(
            child: Container(
              margin: _pageStyles.mainContainerPageEdgeInsets(),
              child: SingleChildScrollView(
                child: Column(
                  children: [
                    Visibility(
                      visible: !isSmallScreen,
                      child: SettingsBarHorizontal(!isSmallScreen, 'Home'),
                      // Row(
                      //   mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      //   // direction:
                      //   //     isSmallScreen ? Axis.vertical : Axis.horizontal,
                      //   children: [
                      //     Spacer(),
                      //     //ICON BUTTONS AND LIGHT DARK TOGGLE ON THE RIGHT
                      //     isSmallScreen
                      //         ? SettingsBarHorizontal(false)
                      //         : SettingsBarHorizontal(true),
                      //   ],
                      // )
                    ),
                    const SizedBox(height: 9.0),
                    Visibility(
                        visible: true,
                        child: LevelPointsProgressWidgetDesktop()),
                    Container(
                      height: 90,
                      margin: EdgeInsets.symmetric(vertical: 12.0),
                      child: NavListItems(),
                    ),
                    Stack(
                      children: [
                        Container(
                          decoration: BoxDecoration(
                            color: Get.isDarkMode
                                ? Colors.black
                                : Colors.white.withOpacity(0.3),
                            borderRadius: BorderRadius.all(
                              Radius.circular(9),
                            ),
                            boxShadow: [
                              BoxShadow(
                                blurRadius: 9,
                                spreadRadius: 1,
                                color: Get.isDarkMode
                                    ? Colors.transparent
                                    : Colors.black.withOpacity(0.1),
                                offset: Offset(6, 6),
                              ),
                            ],
                          ),
                          child: Column(
                            children: [
                              //LEVEL LIST ITEMS
                              Stack(
                                children: [
                                  Stack(
                                    alignment: Alignment.centerLeft,
                                    children: [
                                      Container(
                                        height: 200,
                                        margin: EdgeInsets.fromLTRB(
                                            18.0, 18.0, 18.0, 9.0),
                                        padding: EdgeInsets.symmetric(
                                          horizontal: 90,
                                        ),
                                        decoration: BoxDecoration(
                                          color: Get.isDarkMode
                                              ? Color(0xff333333)
                                              : Colors.white.withOpacity(0.1),
                                          borderRadius:
                                              BorderRadius.circular(9),
                                          boxShadow: [
                                            BoxShadow(
                                              blurRadius: 6,
                                              spreadRadius: 1,
                                              color: Get.isDarkMode
                                                  ? Colors.transparent
                                                  : Colors.black
                                                      .withOpacity(0.1),
                                              offset: Offset(3, 3),
                                            ),
                                          ],
                                        ),
                                      ),
                                      RotationTransition(
                                        turns: new AlwaysStoppedAnimation(
                                            -90 / 360),
                                        child: Container(
                                          padding: EdgeInsets.symmetric(
                                            horizontal: 12.0,
                                            vertical: 6.0,
                                          ),
                                          decoration: BoxDecoration(
                                            color: Get.isDarkMode
                                                ? Colors.black.withOpacity(0.2)
                                                : Colors.black.withOpacity(0.1),
                                            borderRadius:
                                                BorderRadius.circular(3),
                                          ),
                                          child: Text('BY  LEVELED'.tr,
                                              style: TextStyle(
                                                fontSize: 12.0,
                                                color: Colors.white
                                                    .withOpacity(0.6),
                                                fontWeight: FontWeight.bold,
                                                letterSpacing: 1,
                                              )),
                                        ),
                                      ),
                                    ],
                                  ),
                                  Container(
                                    height: 200,
                                    margin: EdgeInsets.fromLTRB(
                                        69.0, 18.0, 18.0, 18.0),
                                    padding: EdgeInsets.symmetric(
                                      horizontal: 30,
                                    ),
                                    decoration: BoxDecoration(
                                      color: Get.isDarkMode
                                          ? Colors.black.withOpacity(0.6)
                                          : Colors.white.withOpacity(0.7),
                                      borderRadius: BorderRadius.circular(9),
                                      boxShadow: [
                                        BoxShadow(
                                          blurRadius: 3,
                                          spreadRadius: 1,
                                          color: Get.isDarkMode
                                              ? Colors.transparent
                                              : Colors.black.withOpacity(0.1),
                                          offset: Offset(1, 1),
                                        ),
                                      ],
                                    ),
                                    child: LevelListItem(),
                                  ),
                                ],
                              ),
                              //TOPIC LIST ITEMS
                              Stack(
                                children: [
                                  Stack(
                                    alignment: Alignment.centerLeft,
                                    children: [
                                      Container(
                                        height: 200,
                                        margin: EdgeInsets.fromLTRB(
                                            18.0, 0.0, 18.0, 18.0),
                                        decoration: BoxDecoration(
                                          color: Get.isDarkMode
                                              ? Color(0xff333333)
                                              : Colors.white.withOpacity(0.1),
                                          borderRadius:
                                              BorderRadius.circular(9),
                                          boxShadow: [
                                            BoxShadow(
                                              blurRadius: 6,
                                              spreadRadius: 1,
                                              color: Get.isDarkMode
                                                  ? Colors.transparent
                                                  : Colors.black
                                                      .withOpacity(0.1),
                                              offset: Offset(3, 3),
                                            ),
                                          ],
                                        ),
                                      ),
                                      RotationTransition(
                                        turns: new AlwaysStoppedAnimation(
                                            -90 / 360),
                                        child: Container(
                                          padding: EdgeInsets.symmetric(
                                            horizontal: 12.0,
                                            vertical: 6.0,
                                          ),
                                          decoration: BoxDecoration(
                                            color: Get.isDarkMode
                                                ? Colors.black.withOpacity(0.2)
                                                : Colors.black.withOpacity(0.1),
                                            borderRadius:
                                                BorderRadius.circular(3),
                                          ),
                                          margin: EdgeInsets.only(
                                            top: 15,
                                          ),
                                          child: Text('BY  TOPICS'.tr,
                                              style: TextStyle(
                                                fontSize: 12.0,
                                                color: Colors.white
                                                    .withOpacity(0.6),
                                                fontWeight: FontWeight.bold,
                                                letterSpacing: 1,
                                              )),
                                        ),
                                      ),
                                    ],
                                  ),
                                  Container(
                                    height: 200,
                                    margin: EdgeInsets.fromLTRB(
                                        69.0, 0.0, 18.0, 18.0),
                                    padding: EdgeInsets.symmetric(
                                      horizontal: 30,
                                    ),
                                    decoration: BoxDecoration(
                                      color: Get.isDarkMode
                                          ? Colors.black.withOpacity(0.6)
                                          : Colors.white.withOpacity(0.7),
                                      borderRadius: BorderRadius.circular(9),
                                      boxShadow: [
                                        BoxShadow(
                                          blurRadius: 3,
                                          spreadRadius: 1,
                                          color: Get.isDarkMode
                                              ? Colors.transparent
                                              : Colors.black.withOpacity(0.1),
                                          offset: Offset(1, 1),
                                        ),
                                      ],
                                    ),
                                    child: TopicListItem(),
                                  ),
                                ],
                              ),
                              // //FAVORITE LIST ITEM
                              // Stack(
                              //   children: [
                              //     Stack(
                              //       alignment: Alignment.centerLeft,
                              //       children: [
                              //         Container(
                              //           height: 200,
                              //           margin: EdgeInsets.fromLTRB(
                              //               45.0, 18.0, 18.0, 18.0),
                              //           padding:
                              //               EdgeInsets.symmetric(
                              //             horizontal: 90,
                              //           ),
                              //           decoration: BoxDecoration(
                              //             color: Get.isDarkMode
                              //                 ? Color(0xff333333)
                              //                 : Colors.white
                              //                     .withOpacity(0.1),
                              //             borderRadius:
                              //                 BorderRadius.circular(
                              //                     9),
                              //             boxShadow: [
                              //               BoxShadow(
                              //                 blurRadius: 6,
                              //                 spreadRadius: 1,
                              //                 color: Get.isDarkMode
                              //                     ? Colors.transparent
                              //                     : Colors.black
                              //                         .withOpacity(
                              //                             0.1),
                              //                 offset: Offset(3, 3),
                              //               ),
                              //             ],
                              //           ),
                              //         ),
                              //         RotationTransition(
                              //           turns:
                              //               new AlwaysStoppedAnimation(
                              //                   -90 / 360),
                              //           child: Container(
                              //             padding:
                              //                 EdgeInsets.symmetric(
                              //               horizontal: 18.0,
                              //               vertical: 12.0,
                              //             ),
                              //             decoration: BoxDecoration(
                              //               color: Get.isDarkMode
                              //                   ? Colors.black
                              //                       .withOpacity(
                              //                           0.2)
                              //                   : Colors.black
                              //                       .withOpacity(
                              //                           0.1),
                              //               borderRadius:
                              //                   BorderRadius
                              //                       .circular(3),
                              //             ),
                              //             margin: EdgeInsets.only(
                              //               top: 12,
                              //             ),
                              //             child: Text(
                              //                 'YOUR  FAVORITES',
                              //                 style: TextStyle(
                              //                   color: Colors.white
                              //                       .withOpacity(
                              //                           0.6),
                              //                   fontWeight:
                              //                       FontWeight.bold,
                              //                   letterSpacing: 1,
                              //                 )),
                              //           ),
                              //         ),
                              //       ],
                              //     ),
                              //     Container(
                              //       height: 200,
                              //       margin: EdgeInsets.fromLTRB(
                              //           114.0, 18.0, 18.0, 18.0),
                              //       padding: EdgeInsets.symmetric(
                              //         horizontal: 30,
                              //       ),
                              //       decoration: BoxDecoration(
                              //         color: Get.isDarkMode
                              //             ? Colors.black
                              //                 .withOpacity(0.6)
                              //             : Colors.white
                              //                 .withOpacity(0.6),
                              //         borderRadius:
                              //             BorderRadius.circular(9),
                              //         boxShadow: [
                              //           BoxShadow(
                              //             blurRadius: 12,
                              //             spreadRadius: 1,
                              //             color: Get.isDarkMode
                              //                 ? Colors.transparent
                              //                 : Colors.black
                              //                     .withOpacity(0.1),
                              //             offset: Offset(9, 9),
                              //           ),
                              //         ],
                              //       ),
                              //     ),
                              //   ],
                              // ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
